<template>
<table>
    <tr>
        <td>用户名</td>
        <td>
            <input type="text" placeholder="请输入用户名" v-model="info.M_Name">
        </td>
    </tr>
    <tr>
        <td>密码</td>
        <td>
            <input type="password" placeholder="请输入密码" v-model="info.M_Pwd">
        </td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" :value="true" v-model="info.M_Sex">男
            <input type="radio" :value="false" v-model="info.M_Sex">女
        </td>
    </tr>
    <tr>
        <td>邮箱</td>
        <td>
            <input type="text" placeholder="请输入邮箱地址" v-model="info.M_Email">
        </td>
    </tr>
    <tr>
        <td>联系方式</td>
        <td>
            <input type="text" placeholder="请输入联系方式" v-model="info.M_Phone">
        </td>
    </tr>
    <tr>
        <td>会员类型</td>
        <td>
           <select v-model="info.Id">
            <option :value="0" >请选择</option>
            <option v-for="init in type" :value="init.Id">{{init.Name }}</option>
           </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="添加" @click="AddMem()">
        </td>
    </tr>
   
</table>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import axios from 'axios'

const info=ref({
    "M_Name": "",
  "M_Pwd": "",
  "M_Phone": "",
  "M_Sex": "",
  "M_Email": "",
  "Id": 0
})

onMounted(()=>{
    ShowType();
})
///创建响应数据
const type=ref([{
    Id:0,
    Name:""
}]);
///下拉框
const ShowType=()=>{
     axios.get("https://localhost:7198/api/Member/GetType")
     .then(res=>{
        type.value=res.data;
     })
    
}


//添加
const AddMem=()=>{
    console.log(info);
    
    if(info.value.M_Name ==""){
        alert('用户名不能为空');
        return;
    }
    if(info.value.M_Phone==""){
        alert('联系方式不能为空');
        return;
    }
    if(info.value.M_Email==""){
        alert('邮件地址不能为空');
        return;
    }
    axios.post("https://localhost:7198/api/Member/AddMember",info.value)
    .then(res=>{
        if(res.data>0){
            alert('添加成功');
        }else if(res.data==-1){
            alert('用户名不能重复');
        }else{
            alert('添加失败');
        }
    })

}

</script>

<style scoped>

</style>